.site-navigation-bar.search-active .SiteSearchNavigation {
    width: 100%;
}

.SiteSearchNavigation {
    @include lg-up {
        display: block;
        width: 300px;
    }

    &.active {
        display: block;
    }

    > .icon {
        position: absolute;
        top: 0;
        right: 16px;
        bottom: 0;
        display: flex;
        align-items: center;
        color: $blue-30;

        button {
            padding: 8px;
            margin-right: -8px;
            border: none;
            cursor: pointer;
            color: $white;
            background-color: transparent;
            &:hover {
                color: $blue-40;
            }
        }
    }
}
